import yaxi from 'yaxi';



// 定义对象模型类
class ObjectModel extends yaxi.ObjectModel {


    // 定义属性集
    static properties = {

        // 定义属性id 默认值为0
        id: 0,

        // 定义属性text 默认值为''
        text: '',

        // 定义属性image 默认值为''
        image: ''
    }

}



// 自定义组件开发示例
class MyComponent extends yaxi.Component {



    // 定义属性集
    static properties = {

        // 定义text属性 默认值为''
        text: ''
    };


    // 定义组件模板
    render() {

        return (
            <div style={{display: 'flex', flexDirection: 'column', flex: 'auto', overflow: 'hidden'}}>
                <div style={{flex: 'none', marginTop: '8px'}}>
                    <div style={{height: "40px", lineHeight: '40px'}}>
                        <slot name="header" />
                    </div>
                    <div style={{height: "40px", lineHeight: '40px'}}>
                        <slot></slot>
                    </div>
                    <div style={{height: "40px", lineHeight: '40px'}}>
                        <span bind-text={this.text} style={{marginRight: '8px'}} />
                        <button on-click={() => this.text = Math.random()}>修改组件text属性</button>
                    </div>
                </div>
            </div>
        );
    }


}



class Page1 extends yaxi.Node {

    constructor() {

        super();

        // 内部状态
        let state = yaxi.state({

            // if控制
            if: true,

            // switch控件
            switch: 1,
        });


        this.load(
            <>
                <div>这是页面1内容</div>
                <div>这个页面演示的是流程控制功能</div>
                <div style={{marginTop: '20px'}}>
                    <div>{'<if test={...}>...</if>'}</div>
                    <div style={{marginTop: '8px', color: 'blue'}}>
                        <if bind-test={state.if}>
                            <div>
                            <span>这是if的内容</span>
                            </div>
                        </if>
                    </div>
                    <button 
                        style={{marginTop: '8px'}} 
                        bind-text={state.if ? '隐藏if' : '显示if'} 
                        on-click={() => state.if = !state.if} />
                </div>
                <div style={{marginTop: '20px'}}>
                    <div>
                        <div>{'<switch test={...}>'}</div>
                        <div style={{paddingLeft: '8px'}}>{'<case when={...}>...</case>'}</div>
                        <div style={{paddingLeft: '8px'}}>{'<case when={...}>...</case>'}</div>
                        <div style={{paddingLeft: '8px'}}>{'<default>...</default>'}</div>
                        <div>{'</switch>'}</div>
                    </div>
                    <div style={{marginTop: '8px', color: 'blue'}}>
                        <switch bind-test={state.switch}>
                            <case when={1}>
                                <span>这是case1的内容</span>
                            </case>
                            <case when={2}>
                                <span>这是case2的内容</span>
                            </case>
                            <default>
                                <span>这是default的内容</span>
                            </default>
                        </switch>
                    </div>
                    <button 
                        style={{marginTop: '8px'}} 
                        text="显示下一项" 
                        on-click={() => state.switch = state.switch > 2 ? 1 : state.switch + 1 } />
                </div>
                <div style={{marginTop: '20px'}}>
                    <div>{'<for each={[1,2,3,4,5]}>{...}</for>'}</div>
                    <div style={{marginTop: '8px', color: 'blue'}}>
                        <for each={[1, 2, 3, 4, 5]}>{
                            item => <span style={{marginRight: '8px'}}>{item}</span>
                        }</for>
                    </div>
                </div>
                <div style={{marginTop: '20px'}}>
                    <div>{'<for from={10} to={0} step={2}>{...}</for>'}</div>
                    <div style={{marginTop: '8px', color: 'blue'}}>
                        <for from={10} to={0} step={2}>{
                            item => <span style={{marginRight: '8px'}}>{item}</span>
                        }</for>
                    </div>
                </div>
            </>
        );
    }

}



class Page2 extends yaxi.Node {

    constructor() {

        super();

        this.load(
            <>
                <div style={{flex: 'none'}}>这是页面2内容</div>
                <div>这个页面演示的是自定义组件开发</div>
                <MyComponent text="this is text ...">
                    <slot-into name="header">这是命名Slot插槽内容</slot-into>
                    <div>这是默认Slot插槽内容</div>
                </MyComponent>
            </>
        );
    }

}



class Page3 extends yaxi.Node {


    // 定义数据表
    dataModel = window.dataModel = new yaxi.DataModel();


    constructor() {

        super();

        // ref演示
        let host;

        this.load(
            <div style={{position: 'relative'}}>
                <div>这是页面3内容</div>
                <div>这个页面演示的是数据模型</div>
                <div style={{marginTop: '20px'}}>
                    <button text="异步加载数据" style={{width: '100px'}} on-click={() => this.loadData()} />
                    <button text="添加子项" style={{width: '100px', marginLeft: '10px'}} on-click={() => this.handleAppend(host)} />
                    <button text="修改text属性" style={{width: '100px', marginLeft: '10px'}} on-click={() => this.handleModify()} />
                </div>
                <div ref={host} style={{overflow: 'auto', position: 'absolute', top: '100px', bottom: '0', width: '100%'}}>
                    <for each={this.dataModel}>{
                        (item, index) =>
                        <div style={{display: 'flex', marginTop: '8px', height: '60px', lineHeight: '60px'}}>
                            <div style={{width: '200px', height: '100%', lineHeight: '20px'}}>
                                <div>
                                    <span text="index:" style={{display: 'inline-block', width: '60px'}} />
                                    <span bind-text={index + 1} />
                                </div>
                                <div>
                                    <span text="id:" style={{display: 'inline-block', width: '60px'}} />
                                    <span bind-text={'id-' + item.id} />
                                </div>
                                <div>
                                    <span text="text:" style={{display: 'inline-block', width: '60px'}} />
                                    <span bind-text={item.text} />
                                </div>
                            </div>
                            <button text="删除" on-click={() => this.dataModel.removeAt(index)} />
                        </div>
                    }</for>
                </div>
            </div>
        );
    }


    // 加载数据
    loadData() {

        // 演示异步加载
        setTimeout(function () {

            let data = [];

            for (let i = 1; i <= 10; i++)
            {
                data.push(new ObjectModel({
                    id: i,
                    text: 'test ' + i,
                    image: '/assets/images/demo.png'
                }));
            }

            this.dataModel.load(data);

        }, 0);
    }


    // 添加数据项
    handleAppend(host) {

        let dataModel = this.dataModel;
        let item;
        let max = 1;

        for (let i = dataModel.length; i--;)
        {
            if ((item = dataModel.at(i)) && item.id >= max)
            {
                max = item.id + 1;
            }
        }

        dataModel.append(new ObjectModel({
            id: max,
            text: 'test ' + max,
            image: '/images/demo.png'
        }));

        // 移动滚动条到最后
        yaxi.microtask(() => host.dom.scrollTop = host.dom.scrollHeight);
    }


    handleModify() {

        let dataModel = this.dataModel;
        let text = Date.now();
        let item;

        for (let i = dataModel.length; i--;)
        {
            if (item = dataModel.at(i))
            {
                item.text = text;
            }
        }
    }

}




export default class Main extends yaxi.Node {



    constructor() {

        super();

        // 内部状态
        let state = yaxi.state({

            // 当前页索引
            index: 0
        });


        // 加载模板
        this.load(
            <div style={{display: 'flex', flexDirection: 'column', overflow: 'hidden', height: '100%', padding: "8px"}}>
                <div style={{height: '60px', lineHeight: '60px'}}>
                    <for to={3}>{
                        item => 
                        <button 
                            text={'切换到页面' + item}
                            style={{marginRight: '10px'}} 
                            on-click={() => state.index = item - 1} />
                    }</for>
                </div>
                <div style={{flex: 'auto', overflow: 'hidden'}}>
                    <for each={[Page1, Page2, Page3]}>{
                        (Page, index) => <Page bind-style={{
                            display: state.index === index.value ? '' : 'none', 
                            height: '100%'
                        }} />
                    }</for>
                </div>
            </div>
        );
    }


}

